<template>
  <div>
    <header>
      <span class="title">ele.me</span>
      <a href="">
        <span>登录|注册</span>
      </a>
    </header>
    <nav>
      <div class="d1">
        <span>当前定位城市:</span>
        <span>定位不准时，请在城市列表中选择</span>
      </div>
      <a href="javascript:;" @click="positionCity"
        ><b>{{ arrbendi.name }}</b>
        <strong
          ><svg viewBox="0 0 1024 1024" id="arrow-right" class="icon">
            <path
              d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z"
              class="selected"
            ></path></svg></strong
      ></a>
    </nav>
    <section>
      <h5>热门城市</h5>
      <ul class="hotul">
        <li v-for="(i, item) in arr" :key="item" @click="hotCity(item)">
          {{ i.name }}
        </li>
      </ul>
    </section>
    <section>
      <ul>
        <li v-for="(i, item) in arrcity" :key="item">
          <h4>{{ i.chengshi }} <span>(按字母排序)</span></h4>
          <ul>
            <li
              v-for="(i, item) in i.city"
              :key="item"
              @click="Cities(i, item)"
            >
              {{ i.name }}
            </li>
          </ul>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
import { getCityAll, getHotCity, getNowCity } from "../../API/index.js";
import Header from "../../components/Header.vue";

export default {
  components: {
    Headerpub: Header,
  },
  data() {
    return { arrbendi: "", arr: [], arrMore: [], arrshou: [], arrcity: [] };
  },
  methods: {
    hotCity(item) {
      this.$router.push({
        path: "/SearchCity",
        query: { city: this.arr[item].name, id: this.arr[item].id },
      });
    },
    positionCity() {
      this.$router.push({
        path: "/SearchCity",
        query: { city: this.arrbendi.name, id: this.arrbendi.id },
      });
    },
    Cities(i, item) {
      this.$router.push({
        path: "/SearchCity",
        query: { city: i.name, id: i.id },
      });
    },
  },
  async mounted() {
    var res = await getCityAll();
    if (res.data) {
      this.arrMore = res.data;
      console.log(this.arrMore);
      for (var key in this.arrMore) {
        this.arrshou.push(key);
      }
      this.arrshou.sort();
      this.arrshou.forEach((item) => {
        for (var key in this.arrMore) {
          if (item == key) {
            this.arrcity.push({ chengshi: item, city: this.arrMore[key] });
          }
        }
      });
    }
    var hotCity = await getHotCity();
    console.log(hotCity);
    if (hotCity.data) {
      this.arr = hotCity.data;
      console.log(this.arr);
    }
    var nowCity = await getNowCity();
    if (nowCity.data) {
      this.arrbendi = nowCity.data;
    }
  },
};
</script>
<style scoped>
.title {
  font-size: 1rem !important;
}
nav .d1 {
  height: 2rem !important;
}
nav .d1:nth-child(2) {
  color: #9f9f9f;
}
section h5 {
  height: 2rem;
}
section {
  color: #666;
  font-weight: 400;
  text-indent: 0.45rem;
  border-bottom: 1px solid #e4e4e4;
}
section h4 {
  color: #666;
  font-weight: 400;
  text-indent: 0.45rem;
  border-bottom: 1px solid #e4e4e4;
}
section ul ul {
  overflow: hidden;
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: 400;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

section ul ul li {
  float: left;
  text-align: center;
  color: #333;
  border-bottom: 0.025rem solid #e4e4e4;
  border-right: 0.025rem solid #e4e4e4;
  width: 25%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 2.75rem;
  line-height: 2.75rem;
}
.hotul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: 400;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.hotul li {
  float: left;
  text-align: center;
  color: #3190e8;
  border-bottom: 0.025rem solid #e4e4e4;
  border-right: 0.025rem solid #e4e4e4;
  width: 25%;
  height: 2.75rem;
  line-height: 2.75rem;
}
header {
  background-color: #3190e8;
  position: fixed;
  line-height: 2.95rem;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.95rem;
}
.title {
  left: 0.4rem;
  font-weight: 400;
  color: #fff;
  width: 2.3rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
header a {
  right: 0.55rem;
  font-size: 0.65rem;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
nav {
  padding-top: 3.35rem;
  border-top: 1px solid #e4e4e4;
  background-color: #fff;
  margin-bottom: 0.4rem;
}
nav div {
  display: flex;
  justify-content: space-between;
  line-height: 1.45rem;
  padding: 0 0.45rem;
}
nav span {
  font-size: 0.55rem;
  color: #666;
}
nav a {
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  height: 2.8rem;
  line-height: 2.8rem;
  padding: 0 0.45rem;
  border-top: 1px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
}
nav a b {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #3190e8;
  font-weight: 400;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
nav a b,
strong {
  font-weight: 400;
}

nav a strong svg {
  fill: #999;
  width: 1rem;
  height: 1rem;
}
</style>
